import React from 'react';
import { DownOutlined,UserOutlined,PoweroffOutlined} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Dropdown, Space } from 'antd';
import {logoutApi} from '@/api/users'
import { store } from '@/store';
import { clearToken } from '@/store/login/authSlice';
import { useNavigate } from 'react-router-dom';
const logout=async ()=>{ 
    const result=await logoutApi()
    if(result.code===200){
        store.dispatch(clearToken())
        localStorage.removeItem('username')
    }
}

const MyHeader: React.FC = () => {
  const navigate = useNavigate()

  const items: MenuProps['items'] = [
    {
      key: '1',
      label: (
        <a target="_blank" >
          个人中心
        </a>
      ),
      icon: <UserOutlined />,
      onClick:()=>{ 
        navigate('/personal')
      }
    },
    {
      key: '2',
      label: (
        <a target="_blank">
          退出登录
        </a>
      ),
      icon: <PoweroffOutlined />,
      onClick:()=>{ 
          logout()
      }
    },
  ];

  return <>
  <Dropdown menu={{ items }} >
    <a onClick={(e) => e.preventDefault()}>
      <Space>
        欢迎你: {localStorage.getItem('username')}
        <DownOutlined />
      </Space>
    </a>
  </Dropdown>
  </>
};

export default MyHeader